<template>
  <SysDialog
      :title="dialog.title"
      :width="dialog.width"
      :height="dialog.height"
      :visible="dialog.visible"
      @onClose="onClose"
      @onConfirm="confirmBtn"
  >
    <template #content>
      <a-form labelAlign="right">
        <a-form-item
            v-bind="validateInfos.teacherName"
            :labelCol="{ style: 'width:80px;' }"
            label="教师姓名"
        >
          <a-input v-model:value="addModel.teacherName"></a-input>
        </a-form-item>

        <a-form-item
            v-bind="validateInfos.teacherNum"
            :labelCol="{ style: 'width:80px;' }"
            label="教师编号"
        >
          <a-input v-model:value="addModel.teacherNum"></a-input>
        </a-form-item>
        <a-form-item :labelCol="{ style: 'width:80px;' }" label="教师描述">
          <a-input v-model:value="addModel.teacherDesc"></a-input>
        </a-form-item>
      </a-form>
    </template>
  </SysDialog>
</template>

<script setup lang="ts">
//弹框属性
import useDialog from "@/hooks/useDialog";
import {reactive} from "vue";
import {EditType, Title} from "@/type/BaseEnum";
import {useForm} from "ant-design-vue/lib/form";
import SysDialog from "@/components/SysDialog.vue";
import useInstance from "@/hooks/useInstance";

//弹框属性
const { dialog, onShow, onClose, onConfirm } = useDialog()
//全局属性
const {global} = useInstance()
//定义表单绑定属性
const addModel = reactive({
  type:'',
  teacherId: '',
  teacherName: '',
  teacherNum: '',
  teacherDesc: ''
})
//表单验证规则
const rules = reactive({
  teacherName: [{
    required: true,
    message: '请输入教师名称',
    trigger: 'change'
  }],
  teacherNum: [{
    required: true,
    message: '请输入教师编号',
    trigger: 'change'
  }]
})
//获取验证方法
const { validate, validateInfos, resetFields } = useForm(addModel, rules)
//注册事件
const emit = defineEmits(['save'])
//表单提交
const confirmBtn = () => {
  validate().then(() => {
    emit('save', addModel)
    onClose()
  })
}
//定义子方法给父组件调用
const show = (type: any,row:any) => {
  //清空表单
  resetFields()

  if (type == EditType.ADD) {
    dialog.width = 650;
    dialog.height = 180;
    dialog.title = Title.ADD;
  } else {
    global.$objCopy(row,addModel)
    dialog.title = Title.EDIT;

  }
  addModel.type = type
  onShow();
}
//暴露方法给外部使用
defineExpose({
  show
})
</script>

<style scoped lang="scss">

</style>
